<template>
	<!--scan.wxml-->
	<view class="scan-view">
		<view class='scan-border'>

			<camera class='scan-camera' mode="scanCode" @error="cameraError" @scancode='scancode' frame-size='large'>
				<!-- <cover-view class='scan-animation' :animation="animation">

				</cover-view> -->
			</camera>
			<!-- 这里可以处理其他内容 -->
			<cover-view class='notice columnbox'>
				<cover-view>小贴士！</cover-view>
				<cover-view style="margin-top: 20rpx;">1、可扫码开启洗车</cover-view>
				<cover-view style="margin-top: 10rpx;">2、可扫码转增优惠券</cover-view>
				<cover-view style="margin-top: 10rpx;">3、可扫码结束订单</cover-view>
				<cover-view style="margin-top: 10rpx;">4、后台配置内容，根据扫码实际情况说明</cover-view>
				<cover-view style="margin-top: 10rpx;">5、请将二维码/条形码放入框内</cover-view>
			</cover-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animation: null
			};
		},
		onLoad() {
			// this.animation = uni.createAnimation({});
			// this.donghua()
		},
		methods: {
			donghua() {
				var that = this;
				// 控制向上还是向下移动
				let m = true
				setInterval(() => {
					if (m) {
						this.animation.translateY(250).step({
							duration: 3000
						})
						m = !m;
					} else {
						this.animation.translateY(-10).step({
							duration: 3000
						})
						m = !m;
					}

					this.animation = this.animation.export()
				}, 3000)
			},
			cameraError() {},
			scancode(e) {
				// 校验扫描结果，并处理
				let res = e.detail.result
			},
		}
	}
</script>

<style lang="scss" scoped>
	/**scan.wxss**/
	.scan-view {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #000;
		position: fixed;
		align-items: center;
		justify-content: space-around;
	}

	.scan-border {
		width: 94%;
		height: 94%;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.scan-camera {
		width: 500rpx;
		height: 500rpx;
		border-radius: 6rpx;
		margin: 30rpx;
		border: #08FDFE solid 1px;
	}

	.cover-corner {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
	}

	.cover-left-top {
		left: 0;
		top: 0;
	}

	.cover-right-top {
		right: 0;
		top: 0;
	}

	.cover-left-bottom {
		left: 0;
		bottom: 0;
	}

	.cover-right-bottom {
		right: 0;
		bottom: 0;
	}

	.scan-animation {
		position: absolute;
		top: -10rpx;
		left: 10rpx;
		width: 480rpx;
		height: 8rpx;
		background-color: #08FDFE;
		border-radius: 50%;
	}

	.notice {
		color: #fff;
		background: #6f6f6f;
		width: 500rpx;
		align-items: flex-start;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-top: 70rpx;
	}
</style>